<template>
    <div class="home">
        <div class="main-content">
            <div class="section-container">
                <div class="video-item">
                    <div class="video-body">
                        <!-- 视频内容组件 -->
                        <video-content :articleId="videoContentId"/>
                    </div>
                    <div class="comment">
                        <!-- 评论组件 -->
                        <comment
                            :articleId="videoContentId"
                            :type="1"
                        ></comment>
                    </div>
                </div>
            </div>
            <div v-if="!isMobileOrPc" class="sidebar fixed-sidebar">
                <!-- 侧边栏内容组件 -->
                <video-list :videoList="videoList"></video-list>
            </div>
        </div>
    </div>
</template>
<script>
import {mixin} from "@/mixins";
import VideoContent from "../components/VideoContent";
import Comment from "../components/Comment";
import sidebarList from "../components/SidebarList";
import advert from "../components/Advert";
import VideoList from "../components/VideoList";
import {isMobileOrPc} from "@/utils/utils";
import {getSidebarVideoList} from "../api/index";

export default {
    name: "video-item",
    mixins: [mixin],
    components: {
        VideoContent,
        Comment,
        sidebarList,
        advert,
        VideoList,
    },
    data() {
        return {
            videoContentId: '', // 当前视频id
            videoContent: {}, // 当前页面需要展示的视频
            isMobileOrPc: isMobileOrPc(),
            videoList: [],
        };
    },
    mounted() {
        // pc
        if (!isMobileOrPc) {
            window.addEventListener("scroll", this.handleScroll);
        }
        console.log(this.videoContentId);
        // 获取侧边栏
        this.getVideoList();
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    created() {
        this.videoContentId = this.$route.params.id;
        console.log("videoContentId" + this.videoContentId);
    },
    methods: {
        /**
         * 处理滚动事件
         */
        handleScroll() {
            const header = document.querySelector(".sidebar");
            const scrollPosition = window.scrollY;

            const threshold = window.innerHeight / 2;
            // 当页面滚动超过一半的时候固定侧边栏
            if (scrollPosition > threshold) {
                header.classList.add("fixed-sidebar");
            } else {
                header.classList.remove("fixed-sidebar");
            }
        },
        getVideoList() {
            getSidebarVideoList()
                .then((res) => {
                    this.videoList = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/video-item.scss";
</style>
